<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
</head>
<style>
    .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

    .box2 {
        width: 300px;
        height: 300px;
        background-color: blue;
    }

    span{
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 原本呢，span属于行内元素，直接设置宽高是不起效的，如果这时候，我给span
        设置了浮动，那么span就会具有行内块元素的特点 */
        float: left;
        /* 如果行内元素有了浮动，则不需要转换成块/行内块就可以直接给宽高 */
    }

    #inner{
        height:100px;
        width:100px;
        background-color:orange;
        float:left;
        
    }

    #outer{
        width:200px;
        background-color:pink;
        /* overflow: hidden; */
    }

    /* #outer::after {
          content: '';
          display: block;
          clear: both;
    } */

    #clear{
        clear:both;
    }
</style>
<body>
    <!-- 
        float属性用于创建浮动框，将目标移动到一边，直到左边缘或右边缘触及包含块或者 另外一个浮动框的边缘

        float: left | right | none（默认）

        特点：
            1. 浮动元素会脱离标准流
                a. 浮动的元素不再保留原先的位置
                b. 脱离标准流的控制 移动到指定位置
            2. 浮动的元素会一行内显示，并且顶部对齐
            3. 浮动的元素会具有行内块元素的特性 
                 /* 
                    任何元素都可以浮动，不管原先是什么模式的元素，只要添加了浮动后，就会具有
                    和行内块元素相似的特性 
                */
            
        注意事项：
            1. 浮动和标准流父盒子搭配
            2. 一个元素懂了，理论上其余兄弟元素也要浮动
            3. 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

     -->
    <!-- <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
    <span>我是span</span> -->


    <!-- 
        清除浮动：闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子）
            1. clear: left | right | both (一般只用both)
                新建一个div 给该div设置clear属性
            2. overflow: hidden | auto | scroll
            3. ::after伪元素法
            
     -->

     <div id="outer">
         <div id="inner"></div>
         <!-- <div id="clear"></div> -->
     </div>
</body>
</html>